<template>
  <div class="cable-item flex align-center">
    <el-tooltip placement="top" :content="$utils.handleServiceI18n(channelData.startPort.bizName)">
      <div
        class="relative port-icon pointer"
        :class="
          operateType !== 'view'
            ? 'color-recommend'
            : 'color-' + channelData.startPort.status.toLowerCase()
        "
      >
        <i class="iconfont icon-AFSprot-icon" />
        <span class="cable-start">
          {{ omissionPortName(channelData.startPort.bizName) }}
        </span>
      </div>
    </el-tooltip>
    <div class="cable-line" :class="channelData.channelColor">
      <div v-if="channelData.fiber" class="flex cable-content">
        <i class="iconfont icon-AFScable-icon" />
        <div v-if="channelData.fiber.fiberName.length <= 10" class="fiber-name">
          {{ channelData.fiber.fiberName }}
        </div>
        <el-tooltip v-else placement="top" :content="channelData.fiber.fiberName">
          <div class="fiber-name">
            {{ omissionPortName(channelData.fiber.fiberName, 10, 'fiber') }}
          </div>
        </el-tooltip>
      </div>
    </div>
    <el-tooltip placement="top" :content="$utils.handleServiceI18n(channelData.endPort.bizName)">
      <div
        class="relative port-icon pointer"
        :class="
          operateType !== 'view'
            ? 'color-recommend'
            : 'color-' + channelData.endPort.status.toLowerCase()
        "
      >
        <i class="iconfont icon-AFSprot-icon" />
        <span class="cable-end">
          {{ omissionPortName(channelData.endPort.bizName) }}
        </span>
      </div>
    </el-tooltip>
  </div>
</template>
<script>
  export default {
    props: {
      channelData: {
        required: true,
        type: Object,
        default: () => {}
      },
      operateType: {
        type: String,
        default: 'view'
      }
    },
    data() {
      return {}
    },
    computed: {},
    created() {},
    methods: {
      omissionPortName(bizName, size = 4, type) {
        bizName = this.$utils.handleServiceI18n(bizName)
        if (bizName.length <= size) {
          return bizName
        }
        if (type && type === 'fiber') {
          const subStr = bizName.substr(0, size)
          return subStr + '...'
        } else {
          const subStr = bizName.substr(0 - size)
          return '...' + subStr
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/assets/css/mixin.module.scss';
  .port-icon {
    width: 16px;
    height: 16px;
&.color-recommend {
    @include themeify {
      color: themed('bizRecommend') !important;
    }
  }

    .cable-start,
    .cable-end {
      position: absolute;
      top: -10px;
      font-size: 12px;
      // white-space: nowrap;
      white-space: pre;
    }
    .cable-start {
      left: 20px;
    }
    .cable-end {
      right: 20px;
    }
  }

  .cable-line {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 80px;
    height: 0;
    border-top: 1px solid transparent;

    .icon-AFScable-icon {
      @include themeify {
        background: themed('dialogBgColor');
      }
    }

    &.color-normal {
      @include themeify {
        background: themed('bizNormal');
      }

      .fiber-name,
      .icon-AFScable-icon {
        @include themeify {
          color: themed('bizNormal');
          border-color: themed('bizNormal');
        }
      }
    }
    &.color-recommend {
      @include themeify {
        background: themed('bizRecommend');
      }

      .fiber-name,
      .icon-AFScable-icon {
        @include themeify {
          color: themed('bizRecommend');
          border-color: themed('bizRecommend');
        }
      }
    }
    &.color-fault {
      @include themeify {
        background: themed('bizFault');
      }
      .fiber-name,
      .icon-AFScable-icon {
        @include themeify {
          color: themed('bizFault');
          border-color: themed('bizFault');
        }
      }
    }
    &.color-doing {
      @include themeify {
        background: themed('bizDoing');
      }
      .fiber-name,
      .icon-AFScable-icon {
        @include themeify {
          color: themed('bizDoing');
          border-color: themed('bizDoing');
        }
      }
    }

    .cable-content {
      min-width: 140px;
      display: flex;
      justify-content: center;
      align-items: center;

      .fiber-name {
        min-width: 40px;
        padding: 0 5px;
        margin-left: 15px;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        // white-space: nowrap;
  white-space: pre;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #333;
        @include themeify {
          background: themed('dialogBgColor');
        }
      }
    }
  }
</style>
